<!--公共头部-->
{template 'aitimt/common/header'}
		<style>
			* {touch-action: pan-y;}
			body{background-color: #FFFFFF;}
			.mui-control-content {background-color: white;}
			.mui-control-content .mui-loading {margin-top: 3.125rem;}
			.mui-table-view .mui-media-object{height: 6.25rem;max-width: 8.125rem;}
			.mui-bar-nav{position: absolute;background-color: #e94709;height: 10rem;border-radius: 0 0 100% 100% /100%;}
			.top-content{position: absolute;width: 100%;font-size:0.625rem;}
			.top-content img{width: 60%;}
			.top-logo {position: absolute;width: 16%;top: 0.625rem;}
			.top-logo img{width: 90%;}
			.top-message{position: absolute;width: 10%;right: 2%;top: 11px;}
			.mui-input-row{overflow: unset;left: 16%;}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item{padding: 0 7px;}
			.mui-search input[type=search] {background-color: #f0774a;width: 60%;border-radius: 3.125rem;height: 35px;color: #ffffff;}
			.mui-active::before{color: #FFFFFF;}
			.mui-search .mui-placeholder{line-height: 2.5rem;font-size: 11px;width: 50%;color: #FFFFFF;}
			.search-icon{line-height: 10px; background-color: #fad6c8;position: absolute;top: 0.375rem;right: 33%;width: 15%;text-align: center;border: 0;height: 35px;color: #e94709;border-radius: 1.25rem;overflow: hidden;}
			.mui-slider .mui-slider-group .slider-item img{width: 80%;margin-top:1% ;margin-left: 10%;border-radius: 1.25rem;}
			.mui-slider{z-index: 15;margin-top:3rem ;overflow: unset;}
			.mui-slider-indicator{bottom: -1.25rem;}
            .mui-slider-indicator .mui-active.mui-indicator{background: #ea4609;}
            .mui-slider-title{color: #ffffff;background: unset;opacity: unset;text-align: center}
			.mui-slider-indicator .mui-indicator{background: #ffcebd;}
			.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
			.mui-indicator .mui-active{background-color:#000000;}
			.mui-grid-view.mui-grid-9{border: none;background-color: #FFFFFF;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell{border: none;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell{padding: 0;margin-top:2%;}
			.know-item img{width: 57%;}
			.mui-search .mui-placeholder .mui-icon{color: #FFFFFF;line-height: 27px;}
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
			.notify{margin: 0 1rem;width: 90%;height: 50px;border: #dbdbdb solid 1px;border-radius: 1.25rem; overflow: hidden}
			.notify img{width: 15%;margin: 0 5px;padding: 5px;float: left;}
			.notify a{font-size: 12px;color: #585657;line-height:5px;width: 70%;}
			#carousel a{margin-top: 10px}
			.hot-title a,.now-title a{font-size: 14px;}
			.hot-content{border: none;width: 95%;margin-left: 4%;margin-top: 5%;display: inline-block;}
			.hot-content .hot-title span{border-left: 0.3125rem #e94709 solid;}
			.hot-content .hot-list .hot-item{background-color: #fbf7f6;width: 46.5%;float: left;margin-top: 2%;margin-right: 3%;}
			.hot-content .hot-list .hot-item img{margin-top:0.125rem ;width: 100%;height: 5rem;}
			.hot-content .hot-list .hot-item div{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #585657;line-height: 1.5625rem;text-align: center;}
			.hot-content .hot-title .hot-more{float: right;color: #999999;margin-right: 5%;}
			.now-content{border: none;width: 95%;margin-left: 4%;margin-top:5% ;display: inline-block;}
			.now-content .now-title span{border-left: 0.3125rem #e94709 solid;}
			.now-content .now-title .now-more{float: right;margin-right: 5%;color: #999999}
			.now-content .now-slider{padding: 0;margin: 0;margin-left: -5%;z-index: 0;width: 105%;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{margin: 0;}
			.now-item{background-color: #fbf7f6;width: 45%;float: left;margin-top: 3%;margin-left: 4%;}
			.mui-table-view-cell{padding: 0;overflow: unset;}
			.now-item img{padding: 0;margin: 0;width: 100%;height:5rem;border-radius: 0;}
			.now-item div{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #585657;line-height: 1.5625rem;text-align: center;}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{margin: 0;color: #666666;}
			.bottom-remind {width: 100%;text-align: center;padding-top: 30%;font-size: 25px;color: #969696;}
			.now-scroll{margin-bottom: 15%;}
			.caroufredsel_wrapper{width: 80% !important}
		</style>
		<header class="mui-bar mui-bar-nav">
				<div class="top-content">
					<a class="top-logo" href="#"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
					<div class="mui-input-row mui-search" style="margin-top: 2px;">
							<input type="search" class="mui-input-clear" id="search" placeholder="输入赛事/类型/城市/状态">
						<button type="button" class="search-icon" onclick="submit()">搜索</button>
					</div>
					<a class="top-message" href="{php echo app_url('home/index/myremind')}"><img src="{$aideUrl}app/resource/aitimt/images/mssage1.png" ></a>
			</div>

		</header>
		<!-- 首页头部end -->
		<div class="mui-slider" id="top-slider">
		  <div class="mui-slider-group mui-slider-loop">
			<!--支持循环，需要重复图片节点-->
			  <!--轮播图 --start-->
			  {loop array_reverse($advlist) $adv}
			  <div class="slider-item mui-slider-item mui-slider-item-duplicate"><a href="{$adv['link']}"><img src="{php echo tomedia($adv['thumb'])}" />
                  {if $adv['advname']!=''}<p class="mui-slider-title mui-ellipsis">{$adv['advname']}</p>{/if}
              </a></div>
              {php break;}
			  {/loop}
			  {loop $advlist $adv}
			  <div class="slider-item mui-slider-item"><a href="{$adv['link']}"><img src="{php echo tomedia($adv['thumb'])}" />
                  {if $adv['advname']!=''}<p class="mui-slider-title mui-ellipsis">{$adv['advname']}</p>{/if}
              </a></div>
              {/loop}
			  <!--支持循环，需要重复图片节点-->
			  {loop $advlist $adv}
			  <div class="slider-item mui-slider-item mui-slider-item-duplicate"><a href="{$adv['link']}"><img src="{php echo tomedia($adv['thumb'])}" />
                  {if $adv['advname']!=''}<p class="mui-slider-title mui-ellipsis">{$adv['advname']}</p>{/if}
              </a></div>
              {php break;}
			  {/loop}
		  </div>
		  <div class="mui-slider-indicator">
			  {loop $advlist $adv}
			  <div class="mui-indicator"></div>
			  {/loop}
		  </div>
		</div>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			{loop $cateData[0] $k $v}
			{if $v['visible_level']}
			<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
				<a href="{php echo app_url($cateUrl[$k])}">
					<span class="know-item"><img src="{php echo tomedia($v['thumb']);}" ></span>
					<div class="mui-media-body" style="font-size: 14px;">{$v['name']}</div>
				</a>
			</li>
			{/if}
			{/loop}
			</ul>
		<div class="notify">
			<a><img src="{$aideUrl}app/resource/aitimt/images/notify.jpg" ></a>
			<div id="carousel" style="margin-top: 2px">
				{loop $remind $item}
				<a href="{php echo app_url('home/index/know').'&id='.$item['id'].'&type=know'}"> · {$item['title']}</a><br>
				{/loop}
			</div>

		</div>
		<div class="article">

				<div class="hot-content">
					<div class="hot-title">

						<span> <a style="margin: 10px; color: #000000;font-weight: 800;">热门推荐</a></span>
						<a href="{php echo app_url('home/index/activity')}" class="hot-more">查看更多</a>
					</div>
					<div class="hot-list">
						{loop $recommendlist $recommend}
						<div class="hot-item">
							<a href="{php echo app_url('home/index/detail').'&activityid='.$recommend['id']}">
								<img src="{php echo tomedia($recommend['thumb'])}" >
								<div>{$recommend['title']}</div>
								<div>{php echo substr($recommend['starttime'],0,10);}</div>
							</a>
						</div>
						{/loop}
				  </div>
				</div>
		<div class="now-content">
			<div class="now-title">
				<span> <a style="margin: 10px; color: #000000;font-weight: 800;">即将开始</a></span>
				<a href="{php echo app_url('home/index/activity')}" class="now-more">查看更多
				</a>
			</div>
		<div id="slider" class="mui-slider now-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item" href="#month01" >1月</a>
						<a class="mui-control-item" href="#month02" >2月</a>
						<a class="mui-control-item" href="#month03" >3月</a>
						<a class="mui-control-item" href="#month04" >4月</a>
						<a class="mui-control-item" href="#month05" >5月</a>
						<a class="mui-control-item" href="#month06" >6月</a>
						<a class="mui-control-item" href="#month07" >7月</a>
						<a class="mui-control-item" href="#month08" >8月</a>
						<a class="mui-control-item" href="#month09" >9月</a>
						<a class="mui-control-item" href="#month10" >10月</a>
						<a class="mui-control-item" href="#month11" >11月</a>
						<a class="mui-control-item" href="#month12" >12月</a>

				</div>
			</div>
				<div class="mui-slider-group">
					{loop $activityList $key=>$activity}
						{if $month==$key}
					<div id="{php echo month.$key}" class="mui-slider-item mui-control-content mui-active">
							<div class="mui-scroll now-scroll">
								<ul class="mui-table-view">
									{if $activity==[]}
									<div class="bottom-remind">暂无活动</div>
									{/if}
									{loop $activity $item}
									<li class="mui-table-view-cell">
										<div  class="now-item">
											<a href="{php echo app_url('home/index/detail').'&activityid='.$item['id']}">
												<img src="{php echo tomedia($item['thumb'])}" >
												<div>{$item['title']}</div>
												<div>{$item['starttime']}</div>
											</a>
										</div>
									</li>
									{/loop}
								</ul>
						</div>
					</div>
					{else}
					<div id="{php echo month.$key}" class="mui-slider-item mui-control-content">
							<div class="mui-scroll now-scroll">
								<ul class="mui-table-view">
									{if $activity==[]}
									 <div class="bottom-remind">暂无活动</div>
									{/if}
									{loop $activity $item}
									<li class="mui-table-view-cell">
										<div  class="now-item">
											<a href="{php echo app_url('home/index/detail').'&activityid='.$item['id']}">
												<img src="{php echo tomedia($item['thumb'])}" >
												<div>{$item['title']}</div>
												<div>{$item['starttime']}</div>
											</a>
										</div>
									</li>
									{/loop}
								</ul>
							</div>
					</div>
					{/if}

					{/loop}

				</div>
			</div>
		</div>
	</div>
		<!-- 公共底部start -->
		{template 'aitimt/common/nav'}
		<!-- 公共底部end -->
<script src="{$aideUrl}app/resource/aitimt/js/jquery.carouFredSel.packed.js"></script>
		<script>
		mui.init({
		});
        $('#carousel').carouFredSel({
			responsive: true,
			direction: 'up',
			height: 50,
			items: {
			height: 100,
				width: 250,
				visible: {
				min: 5,
					max: 5
			}
        },
			scroll: {
				items: '-1',
				timeoutDuration: 5000
			},

        });

		var gallery = mui('#top-slider');
		gallery.slider({
		  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
		});
		mui('.mui-bar').on('tap','a',function(){
			document.location.href=this.href;
		})

		mui('.hot-item').on('tap','a',function(){
			document.location.href=this.href;
		})
		mui('.now-item').on('tap','a',function(){
			document.location.href=this.href;
		})
		// 得到当前月份
		function getMonth(dateObj) {
			var month=dateObj.getMonth()
			switch(month) {
				case 0: return "01"; break;
				case 1: return "02"; break;
				case 2: return "03"; break;
				case 3: return "04"; break;
				case 4: return "05"; break;
				case 5: return "06"; break;
				case 6: return "07"; break;
				case 7: return "08"; break;
				case 8: return "09"; break;
				case 9: return "10"; break;
				case 10: return "11"; break;
				case 11: return "12"; break;
				default:
			}
		}
		var dataObj=new Date();
		var Tmonth=dataObj.getMonth();
		document.getElementById('sliderSegmentedControl').getElementsByTagName('div')[0].getElementsByTagName('a')[Tmonth].classList.add('mui-active');
		mui.init({
			swipeBack: false,
		});
		(function($) {
			$('.mui-scroll-wrapper').scroll({
				indicators: true ,//是否显示滚动条
				 bounce: false ,//是否启用回弹

			});
			document.getElementById('slider').addEventListener('slide', function(e) {
			});
			var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
					//force repaint
					sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
				}
			});
		})(mui);
        function submit() {
            var search=document.getElementById('search').value;
            if (!search){
                util.alert("没有搜索内容");
            }else{
                location.href = "{php echo app_url('home/index/activity')}&search=search&value="+search;
            }
        }
		</script>
	</body>

</html>
